<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消息页</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <script>
      // 设置当前时间
      document.addEventListener("DOMContentLoaded", function () {
        const timeElement = document.querySelector(".time");
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, "0");
        const minutes = now.getMinutes().toString().padStart(2, "0");
        timeElement.textContent = `${hours}:${minutes}`;
      });
    </script>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 标题栏 -->
      <div
        class="flex justify-between items-center px-4 py-2 border-b border-gray-200"
      >
        <h1 class="text-xl font-bold">消息通知</h1>
        <button class="icon-button">
          <i class="fas fa-cog"></i>
        </button>
      </div>

      <!-- 主要内容区域 -->
      <div class="content">
        <!-- 通知分类 -->
        <div class="flex px-4 py-3 bg-white border-b border-gray-100">
          <div
            class="flex-1 text-center font-medium text-blue-500 border-b-2 border-blue-500 pb-2"
          >
            全部消息
          </div>
          <div class="flex-1 text-center text-gray-500">系统通知</div>
          <div class="flex-1 text-center text-gray-500">评论回复</div>
        </div>

        <!-- 消息列表 -->
        <div class="bg-white">
          <!-- 系统消息 -->
          <div class="flex items-center p-4 border-b border-gray-100">
            <div class="relative">
              <div
                class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center"
              >
                <i class="fas fa-bell text-blue-500 text-lg"></i>
              </div>
              <span
                class="absolute -top-1 -right-1 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center text-white text-xs"
                >3</span
              >
            </div>
            <div class="ml-3 flex-1">
              <div class="flex justify-between">
                <div class="font-medium">系统通知</div>
                <div class="text-xs text-gray-400">10:28</div>
              </div>
              <div class="text-sm text-gray-500 mt-1">
                您的应用《微信》已更新到最新版本
              </div>
            </div>
          </div>

          <!-- 优惠活动 -->
          <div class="flex items-center p-4 border-b border-gray-100">
            <div class="relative">
              <div
                class="w-12 h-12 bg-red-50 rounded-full flex items-center justify-center"
              >
                <i class="fas fa-gift text-red-500 text-lg"></i>
              </div>
              <span
                class="absolute -top-1 -right-1 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center text-white text-xs"
                >1</span
              >
            </div>
            <div class="ml-3 flex-1">
              <div class="flex justify-between">
                <div class="font-medium">优惠活动</div>
                <div class="text-xs text-gray-400">昨天</div>
              </div>
              <div class="text-sm text-gray-500 mt-1">
                618年中大促！付费应用最高立减50元
              </div>
            </div>
          </div>

          <!-- 应用评论 -->
          <div class="flex items-center p-4 border-b border-gray-100">
            <div
              class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center"
            >
              <i class="fas fa-comment-dots text-green-500 text-lg"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex justify-between">
                <div class="font-medium">应用评论</div>
                <div class="text-xs text-gray-400">昨天</div>
              </div>
              <div class="text-sm text-gray-500 mt-1">
                有人回复了您对《王者荣耀》的评论
              </div>
            </div>
          </div>

          <!-- 安全提醒 -->
          <div class="flex items-center p-4 border-b border-gray-100">
            <div
              class="w-12 h-12 bg-yellow-50 rounded-full flex items-center justify-center"
            >
              <i class="fas fa-shield-alt text-yellow-500 text-lg"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex justify-between">
                <div class="font-medium">安全提醒</div>
                <div class="text-xs text-gray-400">3天前</div>
              </div>
              <div class="text-sm text-gray-500 mt-1">
                您的账号近期在新设备登录，请确认是您本人操作
              </div>
            </div>
          </div>

          <!-- 应用审核 -->
          <div class="flex items-center p-4 border-b border-gray-100">
            <div
              class="w-12 h-12 bg-purple-50 rounded-full flex items-center justify-center"
            >
              <i class="fas fa-check-circle text-purple-500 text-lg"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex justify-between">
                <div class="font-medium">应用审核</div>
                <div class="text-xs text-gray-400">上周</div>
              </div>
              <div class="text-sm text-gray-500 mt-1">
                恭喜！您提交的应用已通过审核，现已上线
              </div>
            </div>
          </div>

          <!-- 付款成功 -->
          <div class="flex items-center p-4 border-b border-gray-100">
            <div
              class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center"
            >
              <i class="fas fa-receipt text-blue-500 text-lg"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex justify-between">
                <div class="font-medium">付款通知</div>
                <div class="text-xs text-gray-400">上周</div>
              </div>
              <div class="text-sm text-gray-500 mt-1">
                您已成功购买《原神》内付费项目，花费￥68.00
              </div>
            </div>
          </div>

          <!-- 应用更新提醒 -->
          <div class="flex items-center p-4 border-b border-gray-100">
            <div
              class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center"
            >
              <i class="fas fa-download text-indigo-500 text-lg"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex justify-between">
                <div class="font-medium">更新提醒</div>
                <div class="text-xs text-gray-400">上月</div>
              </div>
              <div class="text-sm text-gray-500 mt-1">
                您有5个应用可更新，建议及时更新以获得最佳体验
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item active">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>
  </body>
</html>
